<template>
  <el-main>
    <div class="wrap">
      <el-row>
        <el-col :span="8">
          <el-card :body-style="{padding: '0px'}">
            <img src="../assets/star06.svg" class="img">
            <h3>普通问卷</h3>
            <div class="text">五种题型，任你选择</div>
            <el-button type="primary" style="width: 150px" @click="newSurvey('normal')">创建</el-button>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :body-style="{padding: '0px'}">
            <img src="../assets/star03.svg" class="img">
            <h3>报名问卷</h3>
            <div class="text">信息登记，活动报名</div>
            <el-button type="primary" style="width: 150px" @click="newSurvey('sign')">创建</el-button>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :body-style="{padding: '0px'}">
            <img src="../assets/star08.svg" class="img">
            <h3>投票问卷</h3>
            <div class="text">实时排名，图文显示</div>
            <el-button type="primary" style="width: 150px" @click="newSurvey('vote')">创建</el-button>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-card :body-style="{padding: '0px'}">
            <img src="../assets/star011.svg" class="img">
            <h3>考试问卷</h3>
            <div class="text">题目乱序，自动判题</div>
            <el-button type="primary" style="width: 150px" @click="newSurvey('exam')">创建</el-button>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :body-style="{padding: '0px'}">
            <img src="../assets/star016.svg" class="img">
            <h3>疫情打卡问卷</h3>
            <div class="text">坚持打卡，助力防疫</div>
            <el-button type="primary" style="width: 150px" @click="newSurvey('location')">创建</el-button>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :body-style="{padding: '0px'}">
            <img src="../assets/waiting.svg" class="img" style="background-size: cover; border-color: white;">
            <h3>敬请期待...</h3>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-main>
</template>

<script>
export default {
  name: "Choose",
  data() {
    return {
      types: {
        normal: -1,
        vote: -2,
        sign: -3,
        exam: -4,
        location: -5
      }
    };
  },
  methods: {
    newSurvey(type) {
      let ttype = this.types[type];
      this.$router.replace("/detail/surveyPage/" + ttype);
    }
  }
};
</script>

<style scoped>
.el-main {
  width: 100%;
  height: calc(100vh - 60px);
  background-color: #e9ecef;
}
.wrap {
  width: 940px;
  margin: auto;
}

.el-row {
  margin-bottom: 20px;
}

.el-card {
  width: 300px;
  height: 315px;
}

.img {
  width: 200px;
  vertical-align: top;
  overflow: hidden;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.text {
  height: 18px;
  font-size: 14px;
  color: #909399;
  line-height: 18px;
  margin: 5px 0 10px 0;
}
h3 {
  margin: 5px;
}
</style>